<template>
    <div class="user">
        <el-form :inline="true" >
          <el-form-item label="姓名">
            <el-input  placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input  placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="手机">
            <el-input  placeholder="请输入手机"></el-input>
          </el-form-item>
            <el-form-item label="部门">
            <el-select  placeholder="请输选择部门">
              <el-option label="策划部" value="shanghai"></el-option>
              <el-option label="后勤部" value="beijing"></el-option>
              <el-option label="员工" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="query">
              <el-button type="primary" @click="onSubmit">查询</el-button>
        </div>
        <el-table :data="categoryList" style="width: 100%" border stripe>
            <el-table-column type="index" :index="1">
            </el-table-column>
            <el-table-column prop="id" label="id" width="120">
            </el-table-column>
            <el-table-column prop="name" label="真实姓名" width="180" align="center">
                <template slot-scope="scope" >
                    <img :src="scope.row.img" alt="用户图片" class="userimg">
                    <div>
                        {{scope.row.name}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="email" label="邮箱" width="180">
            </el-table-column>
            <el-table-column prop="phoneNumber" label="手机" width="120" >
            </el-table-column>
            <el-table-column prop="job" label="部门" width="120">
            </el-table-column>
            <el-table-column prop="status" label="状态" >
            </el-table-column>
            
            <el-table-column fixed="right" label="操作" >
                <template slot-scope="scope">
                    <el-button @click.native.prevent="deleteRow(scope.$index, tableData4)" type="success" size="mini">
                        通过
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pages">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10, 50, 100, 200]"
              :page-size="15"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400">
            </el-pagination>
          </div>
    </div>
</template>
<script>
// @ 是 /src 的别名
export default {
    name: 'UserIndex',
    props: {

    },
    data() {
        return {
            categoryList: [{
                id: '10001',
                img: 'http://jiuye-res.jikexueyuan.com/zhiye/showcase/attach-/20170704/914408a9-afc8-4aaf-8ff3-f7a2497bfeba.png',
                name: '张三张三张三张三张三',
                email: 'youjie2015@126.com',
                phoneNumber: '13135347869',
                status: '审核中',
                job: '策划部'
            },
            {
                id: '10001',
                img: 'http://jiuye-res.jikexueyuan.com/zhiye/showcase/attach-/20170704/914408a9-afc8-4aaf-8ff3-f7a2497bfeba.png',
                name: '张三张三张三张三张三',
                email: 'youjie2015@126.com',
                phoneNumber: '13135347869',
                status: '审核中',
                job: '策划部'
            },{
                id: '10001',
                img: 'http://jiuye-res.jikexueyuan.com/zhiye/showcase/attach-/20170704/914408a9-afc8-4aaf-8ff3-f7a2497bfeba.png',
                name: '张三张三张三张三张三',
                email: 'youjie2015@126.com',
                phoneNumber: '13135347869',
                status: '审核中',
                job: '策划部'
            },
            {
                id: '10001',
                img: 'http://jiuye-res.jikexueyuan.com/zhiye/showcase/attach-/20170704/914408a9-afc8-4aaf-8ff3-f7a2497bfeba.png',
                name: '张三张三张三张三张三',
                email: 'youjie2015@126.com',
                phoneNumber: '13135347869',
                status: '审核中',
                job: '策划部'
            }]
        }
    },
    methods: {

    }
}
</script>
<style scoped lang="styl">
.userimg
    width 60px
    height 60px
    border-radius 30px
.query
    display flex
    justify-content flex-end
    margin 0 58px 20px 0 
.pages
    display flex
    justify-content flex-end
    margin-top 20px
</style>